<template>
  <div>
      <div v-for="item in planList" :key="item.ref" :class="item.startClassName" :ref="item.ref"></div>
      <div class="plan9_start positon_box" ref="plan9">
          <div class="text_top">量化策略</div>
          <div class="text_y_line"></div>
          <div class="text_top">专家策略</div>
          <div class="add_box">
              +
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'IntelligentSolution',
    data(){
        return{
            planList:[{startClassName:'plan1_start positon_box',ref:'plan1',activeClassName:'plan1 positon_box'},
            {startClassName:'plan2_start positon_box',ref:'plan2',activeClassName:'plan2 positon_box'},
            {startClassName:'plan3_start positon_box',ref:'plan3',activeClassName:'plan3 positon_box'},
            {startClassName:'plan4_start positon_box',ref:'plan4',activeClassName:'plan4 positon_box'},
            {startClassName:'plan5_start positon_box',ref:'plan5',activeClassName:'plan5 positon_box'},
            {startClassName:'plan6_start positon_box',ref:'plan6',activeClassName:'plan6 positon_box'},
            {startClassName:'plan7_start positon_box',ref:'plan7',activeClassName:'plan7 positon_box'},
            {startClassName:'plan8_start positon_box',ref:'plan8',activeClassName:'plan8 positon_box'},
            // {startClassName:'plan9_start positon_box',ref:'plan9',activeClassName:'plan9 positon_box'},
            {startClassName:'plan10_start positon_box',ref:'plan10',activeClassName:'plan10 positon_box'},
            {startClassName:'plan11_start positon_box',ref:'plan11',activeClassName:'plan11 positon_box'},]
        }
    },
    mounted(){
        let i = 1
        let timeInter = setInterval(()=>{
            let theRef = `plan${i}`
            let className = `position_box plan${i}`
            if(i == 9){
                this.$refs[theRef].className = className
            } else{
            this.$refs[theRef][0].className = className
            }     

            // .className = className
            i++
            if(i == 12){
                clearInterval(timeInter)
            }
        },1000)
    }
}
</script>

<style scoped>
.positon_box{
    
    background-size:100% 100%;
}
.plan1_start{
    position: absolute;
    width: 3.71875vw;
    height: 4.416667vw;
    background: url('../../assets/img/plan1.png');
    top: 26.026042vw;
    left: 2.994791666666667vw;
    opacity: 0;
    transition: all 1s;
}
.plan1{
    position: absolute;
    width: 11.71875vw;
    height: 20.416666666666668vw;
    background: url('../../assets/img/plan1.png');
    background-size:100% 100% ;
    top:20.026041666666668vw;
    left: 2.994791666666667vw;
    opacity: 1;
    transition: all 1s;
}

.plan2_start{
    position: absolute;
    width: 7.5vw;
    height: 12.734375vw;
    background: url('../../assets/img/plan2.png');
    background-size:100% 100% ;
    top:23.791666666666668vw;
    left:12.494791666666666vw ;
    opacity: 0;
    transition: all 1s;
}

.plan2{
    position: absolute;
    width: 7.5vw;
    height: 12.734375vw;
    background: url('../../assets/img/plan2.png');
    background-size:100% 100% ;
    top:24.791666666666668vw;
    left:15.494791666666666vw ;
    opacity: 1;
    transition: all 1s;
}

.plan3_start{
    position: absolute;
    width:19.505208333333332vw ;
    height:2.604166666666667vw ;
    background: url('../../assets/img/plan3.png');
    background-size:100% 100% ;
    top:10.484375vw;
    left:22.505208333333332vw ;
    opacity: 0;
    transition: all 1s;
}

.plan3{
    position: absolute;
    width:19.505208333333332vw ;
    height:2.604166666666667vw ;
    background: url('../../assets/img/plan3.png');
    background-size:100% 100% ;
    top:11.484375vw;
    left:24.505208333333332vw ;
    opacity: 1;
    transition: all 1s;
}

.plan4_start{
    position: absolute;
    width: 20.3125vw;
    height:33.4375vw ;
    background: url('../../assets/img/plan4.png');
    background-size:100% 100% ;
    top:14.677083333333334vw;
    left: 22.453125vw;
    opacity: 0;
    transition: all 1s;
}

.plan4{
    position: absolute;
    width: 20.3125vw;
    height:33.4375vw ;
    background: url('../../assets/img/plan4.png');
    background-size:100% 100% ;
    top:15.677083333333334vw;
    left: 24.453125vw;
    opacity: 1;
    transition: all 1s;
}

.plan5_start{
    position: absolute;
    width:4.166666666666666vw ;
    height:2.8125vw ;
    background: url('../../assets/img/plan5.png');
    background-size:100% 100% ;
    top:22.072916666666668vw;
    left: 41.765625vw;
    opacity: 0;
    transition: all 1s;
}

.plan5{
    position: absolute;
    width:4.166666666666666vw ;
    height:2.8125vw ;
    background: url('../../assets/img/plan5.png');
    background-size:100% 100% ;
    top:22.072916666666668vw;
    left: 44.765625vw;
    opacity: 1;
    transition: all 1s;
}

.plan6_start{
    position: absolute;
    width:17.682291666666668vw ;
    height:19.53125vw ;
    background: url('../../assets/img/plan6.png');
    background-size:100% 100% ;
    top:13.973958333333334vw;
    left:48.10416666666667vw ;
    opacity: 0;
    transition: all 1s;
}

.plan6{
    position: absolute;
    width:17.682291666666668vw ;
    height:19.53125vw ;
    background: url('../../assets/img/plan6.png');
    background-size:100% 100% ;
    top:14.973958333333334vw;
    left:50.10416666666667vw ;
    opacity: 1;
    transition: all 1s;
}

.plan7_start{
    position: absolute;
    width:27.0796875vw ;
    height: 0.5208333333333333vw;
    background: url('../../assets/img/plan7.png');
    background-size:100% 100% ;
    top:43.088541666666664vw;
    left: 42.505208333333336vw;
    opacity: 0;
    transition: all 1s;
}

.plan7{
    position: absolute;
    width:27.0796875vw ;
    height: 0.5208333333333333vw;
    background: url('../../assets/img/plan7.png');
    background-size:100% 100% ;
    top:44.088541666666664vw;
    left: 44.505208333333336vw;
    opacity: 1;
    transition: all 1s;
}

.plan8_start{
    position: absolute;
    width: 3.0171875vw;
    height:0.5208333333333333vw ;
    background: url('../../assets/img/plan8.png');
    background-size:100% 100% ;
    top:22.567708333333336vw;
    left: 66.203125vw;
    opacity:0;
    transition: all 1s;
}

.plan8{
    position: absolute;
    width: 3.0171875vw;
    height:0.5208333333333333vw ;
    background: url('../../assets/img/plan8.png');
    background-size:100% 100% ;
    top:23.567708333333336vw;
    left: 68.203125vw;
    opacity: 1;
    transition: all 1s;
}

.plan10_start{
    position: absolute;
    width: 3.0171875vw;
    height:0.5208333333333333vw ;
    background: url('../../assets/img/plan8.png');
    background-size:100% 100% ;
    top:32.619791666666664vw;
    left: 74.38020833333333vw;
    opacity: 0;
    transition: all 1s;
}

.plan10{
    position: absolute;
    width: 3.0171875vw;
    height:0.5208333333333333vw ;
    background: url('../../assets/img/plan8.png');
    background-size:100% 100% ;
    top:33.619791666666664vw;
    left: 76.38020833333333vw;
    opacity: 1;
    transition: all 1s;
}

.plan11_start{
    position: absolute;
    width: 17.526041666666668vw;
    height: 21.510416666666668vw;
    background: url('../../assets/img/plan9.png');
    background-size:100% 100% ;
    top:18.453125vw;
    left: 78.20833333333334vw;
    opacity: 0;
    transition: all 1s;
}

.plan11{
    position: absolute;
    width: 17.526041666666668vw;
    height: 21.510416666666668vw;
    background: url('../../assets/img/plan9.png');
    background-size:100% 100% ;
    top:19.453125vw;
    left: 80.20833333333334vw;
    opacity: 1;
    transition: all 1s;
}

.plan9_start{
    position: absolute;
    position: absolute;
    top: 21.751042vw;
    left: 70.213542vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 23vw;
    opacity: 0;
    transition: all 1s;
}

.plan9{
    position: absolute;
    position: absolute;
    top: 22.751042vw;
    left: 72.213542vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 23vw;
    opacity: 1;
    transition: all 1s;
}
.text_top{
    width:4.166666666666666vw;
    height:1.4583333333333333vw;
    font-size:1.0416666666666665vw;;
    font-family: HYRuiHuSongW;
    color: #5DC5EE;
    text-align: center;
}
.text_y_line{
    width:0.026041666666666668vw;
    height:17.734375vw;
    border: 0.026041666666666668vw dashed #5DC5EE;
}

.add_box{
    width:2.2395833333333335vw;
    height:2.2395833333333335vw;
    position: absolute;
    background: #5DC5EE;
    border-radius: 50%;
    color: #fff;
    font-size:2vw;
    line-height:2.095833333333335vw;
    text-align: center;
}
</style>